import Confrim from './confirm.vue'
import Modal from "./modal.vue"
import Vue, { CreateElement } from 'vue';
import { ModalConfig } from "./modalConfig"

function CreateInstance(prop: object) {
  const _props = prop || {};
  const Instance = new Vue({
    render(h: CreateElement) {
      return h(Confrim, {
        props: _props
      });
    }
  });
  const component = Instance.$mount();
  document.body.appendChild(component.$el);
  const modal = Instance.$children[0];

  return {
    show(type: string, props: ModalConfig) {
      Object.assign(modal.$props, props);
      modal.$props.iconType = props.icon;
      modal.$data.content = props.content;
      switch (type) {
        case 'info':
          modal.$data.iconName = 'ios-information-circle';
          modal.$data.iconType = 'info';
          break;
        case 'success':
          modal.$data.iconName = 'ios-checkmark-circle';
          modal.$data.iconType = 'success';
          break;
        case 'warning':
          modal.$data.iconName = 'ios-alert';
          modal.$data.iconType = 'warning';
          break;
        case 'error':
          modal.$data.iconName = 'ios-close-circle';
          modal.$data.iconType = 'error';
          break;
        case 'confirm':
          modal.$data.iconName = 'ios-help-circle';
          modal.$data.iconType = 'confirm';
          break;
      }

      modal.$data.visible = true;
    },
    remove() {
      modal.$props.visible = false;
      modal.$props.buttonLoading = false;
      (modal as any).remove();
    },
    component: modal
  }
}

class ConfrimModal {

  message(type: string, options: ModalConfig | string) {
    const instance = CreateInstance({})
    if (typeof options === 'string') {
      options = {
        content: options
      };
    }
    //options.content, options.duration, type, options.onClose, options.closable, options.render, options.background
    return instance.show(type, options);
  }
  /**
   * 消息
   * @param config ModalConfig为相关配置,string为待显示的内容
   */
  public info(config: ModalConfig | string) {
    this.message("info", config);
  }
  /**
   * 成功
   * @param config ModalConfig为相关配置,string为待显示的内容
   */
  public success(config: ModalConfig | string) {
    this.message("success", config);
  }
  /**
   * 警告
   * @param config ModalConfig为相关配置,string为待显示的内容
   */
  public warning(config: ModalConfig | string) {
    this.message("warning", config);
  }
  /**
   * 错误
   * @param config ModalConfig为相关配置,string为待显示的内容
   */
  public error(config: ModalConfig | string) {
    this.message("error", config);
  }
  /**
   * 对话框
   * @param config ModalConfig为相关配置,string为待显示的内容
   */
  public confirm(config: ModalConfig | string) {
    this.message("confirm", config);
  }
  /**
    * 加载   
    */
  public loading() {
    this.message("loading", "");
  }
  /**
   * 移除
   */
  public remove() {
    // instance.remove();
  }
}

export const confrimModal = new ConfrimModal();


export default Modal